<template>
  <div class="admin-layout">
    <!-- 侧边栏 -->
    <div class="sidebar" :class="{ collapsed: sidebarCollapsed }">
      <div class="sidebar-header">
        <div class="logo">
          <el-icon><Wheat /></el-icon>
          <span v-if="!sidebarCollapsed">后台管理</span>
        </div>
        <el-button type="text" class="collapse-btn" @click="toggleSidebar">
          <el-icon><Fold v-if="!sidebarCollapsed" /><Expand v-else /></el-icon>
        </el-button>
      </div>
      
      <el-menu
        :default-active="activeMenu"
        class="sidebar-menu"
        :collapse="sidebarCollapsed"
        background-color="#001529"
        text-color="#fff"
        active-text-color="#1890ff"
        @select="handleMenuSelect"
      >
        <el-menu-item index="dashboard">
          <el-icon><DataBoard /></el-icon>
          <template #title>仪表盘</template>
        </el-menu-item>
        
        <el-sub-menu index="user">
          <template #title>
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </template>
          <el-menu-item index="user-list">用户列表</el-menu-item>
          <el-menu-item index="user-role">角色管理</el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="wheat">
          <template #title>
            <el-icon><Wheat /></el-icon>
            <span>小麦管理</span>
          </template>
          <el-menu-item index="wheat-data">品质数据</el-menu-item>
          <el-menu-item index="wheat-analysis">数据分析</el-menu-item>
          <el-menu-item index="wheat-report">检测报告</el-menu-item>
        </el-sub-menu>
        
        <el-sub-menu index="system">
          <template #title>
            <el-icon><Setting /></el-icon>
            <span>系统管理</span>
          </template>
          <el-menu-item index="system-config">系统配置</el-menu-item>
          <el-menu-item index="system-log">操作日志</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    
    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 顶部导航栏 -->
      <div class="top-navbar">
        <div class="navbar-left">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item>后台管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ currentPageTitle }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        
        <div class="navbar-right">
          <el-dropdown @command="handleUserCommand">
            <span class="user-info">
              <el-avatar :size="32" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
              <span class="username">{{ currentUser.username }}</span>
              <el-icon><ArrowDown /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="profile">个人资料</el-dropdown-item>
                <el-dropdown-item command="settings">设置</el-dropdown-item>
                <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      
      <!-- 内容区域 -->
      <div class="content-area">
        <component :is="currentComponent" />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import Dashboard from '../components/admin/Dashboard.vue'
import UserList from '../components/admin/UserList.vue'
import UserRole from '../components/admin/UserRole.vue'
import WheatData from '../components/admin/WheatData.vue'
import WheatAnalysis from '../components/admin/WheatAnalysis.vue'
import WheatReport from '../components/admin/WheatReport.vue'
import SystemConfig from '../components/admin/SystemConfig.vue'
import SystemLog from '../components/admin/SystemLog.vue'

export default {
  name: 'Admin',
  components: {
    Dashboard,
    UserList,
    UserRole,
    WheatData,
    WheatAnalysis,
    WheatReport,
    SystemConfig,
    SystemLog
  },
  setup() {
    const router = useRouter()
    const sidebarCollapsed = ref(false)
    const activeMenu = ref('dashboard')
    const currentUser = ref({ username: '管理员' })
    
    // 页面标题映射
    const pageTitles = {
      dashboard: '仪表盘',
      'user-list': '用户列表',
      'user-role': '角色管理',
      'wheat-data': '品质数据',
      'wheat-analysis': '数据分析',
      'wheat-report': '检测报告',
      'system-config': '系统配置',
      'system-log': '操作日志'
    }
    
    // 组件映射
    const componentMap = {
      dashboard: 'Dashboard',
      'user-list': 'UserList',
      'user-role': 'UserRole',
      'wheat-data': 'WheatData',
      'wheat-analysis': 'WheatAnalysis',
      'wheat-report': 'WheatReport',
      'system-config': 'SystemConfig',
      'system-log': 'SystemLog'
    }
    
    const currentPageTitle = computed(() => {
      return pageTitles[activeMenu.value] || '仪表盘'
    })
    
    const currentComponent = computed(() => {
      return componentMap[activeMenu.value] || 'Dashboard'
    })
    
    const toggleSidebar = () => {
      sidebarCollapsed.value = !sidebarCollapsed.value
    }
    
    const handleMenuSelect = (index) => {
      activeMenu.value = index
    }
    
    const handleUserCommand = (command) => {
      switch (command) {
        case 'logout':
          localStorage.removeItem('currentUser')
          router.push('/login')
          break
        case 'profile':
          // 处理个人资料
          break
        case 'settings':
          // 处理设置
          break
      }
    }
    
    onMounted(() => {
      // 检查用户权限
      const user = JSON.parse(localStorage.getItem('currentUser') || '{}')
      if (!user.username) {
        router.push('/login')
        return
      }
      currentUser.value = user
    })
    
    return {
      sidebarCollapsed,
      activeMenu,
      currentUser,
      currentPageTitle,
      currentComponent,
      toggleSidebar,
      handleMenuSelect,
      handleUserCommand
    }
  }
}
</script>

<style scoped>
.admin-layout {
  display: flex;
  height: 100vh;
  background: #f0f2f5;
}

.sidebar {
  width: 240px;
  background: #001529;
  transition: width 0.3s;
  display: flex;
  flex-direction: column;
}

.sidebar.collapsed {
  width: 64px;
}

.sidebar-header {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #002140;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
}

.collapse-btn {
  color: #fff;
  font-size: 16px;
}

.sidebar-menu {
  flex: 1;
  border: none;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.top-navbar {
  height: 64px;
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  box-shadow: 0 1px 4px rgba(0,21,41,0.08);
}

.navbar-left {
  display: flex;
  align-items: center;
}

.navbar-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s;
}

.user-info:hover {
  background: #f5f5f5;
}

.username {
  font-size: 14px;
  color: #333;
}

.content-area {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    z-index: 1000;
    transform: translateX(-100%);
    transition: transform 0.3s;
  }
  
  .sidebar.collapsed {
    transform: translateX(0);
  }
  
  .content-area {
    padding: 16px;
  }
}
</style>
